<template>
  <div>
    <el-card class="container">
      <el-form :model="attr" :rules="rules" class="margin" ref="form">
        <el-form-item label="属性名" prop="attrName" label-width="80">
          <el-input
            v-model="attr.attrName"
            style="width: 200px"
            class="margin"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        class="el-icon-plus"
        :disabled="!attr.attrName"
        @click="addAttrValue"
      >
        添加属性值
      </el-button>
      <el-table :data="attrValueList" border class="margin">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="valueName" label="属性名称">
          <template v-slot="{ row, $index }">
            <el-input
              v-show="row.isEdit"
              :ref="`input${$index}`"
              size="mini"
              placeholder="请输入属性值名称"
              v-model="attr.valueName"
              @blur="setAttrValue(row, $index)"
              @keyup.enter.native="$event.target.blur()"
            >
              <!-- 
             attr.attrValue:是input的临时值
             setAttrValue($index)失去焦点是吧数据添加到attrValueList存起来
             ref :如果绑定是相同的则会覆盖，最后一个生效，要给每一个input绑定不同的ref
             keyup.enter.native  js原生的键盘事件 elementui没有需要加native修饰符
              @keyup.enter.native="$event.target.blur()"会触发一次失去焦点事件 
              @keyup.enter.native="setAttrValue(row,$index)" keyup也会触发setAttrValue,会触发二次，
                点击了，同时也失去焦点了
             -->
            </el-input>
            <p v-show="!row.isEdit" @click="showEdit(row, $index)">
              {{ row.valueName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ $index }">
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @onConfirm="delAttrValue($index)"
            >
              <el-tooltip content="删除属性值" placement="top" slot="reference">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                ></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="saveAttrValueList">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-card>
  </div>
</template>

<script>
// import equalsObj from '@/utils/equalsObj'
import { mapState } from "vuex";
import { reqSaveAttrInfo } from "@/api/production/attr";
export default {
  name: "UpdateOrLook",
  data() {
    return {
      attr: {
        attrName: "",
        valueName: "", //临时值
      },
      attrValueList: [],

      rules: {
        attrName: [
          {
            required: true,
            message: "请输入属性名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("category", ["category3Id"]),
  },
  methods: {
    //1. 添加属性值
    addAttrValue() {
      // 1.1先添加一个空对象然后显示出其他的内容，在通过input收集起来在添加
      // 1.2初始化，由于push是操作响应式，添加的数据也是响应式，初始化添加一个值
      // 1.3给每一个添加状态切换数据
      this.attrValueList.push({
        valueName: "",
        isEdit: true,
      });
      // 1.4更新DOM是异步的，拿到最新的DOM使最后一个input聚焦
      this.$nextTick(() => {
        // 最后一个聚
        const lastInput = `input${this.attrValueList.length - 1}`;
        this.$refs[lastInput].focus();
      });
      // // 1.5清除临时值
      // this.attr.valueName = "";
    },
    //2.设置属性，有编辑模式->显示模式
    setAttrValue(row, index) {
      let { valueName } = this.attr;
      // 2.5 如果输入值为空则删掉，删掉一般使用过滤和splice
      if (!valueName) {
        // splice操作原数组，也是改变响应式数据
        this.attrValueList.splice(index, 1);
      }
      // 2.6如果是相同的属性则提示不可以添加相同属性
      // let res=this.attrValueList.some(item=>item.valueName=valueName)
      // console.log(res,1);

      // 2.1把临时的值添加到attrValueList，收集。初始化过了，就是响应式数据有两种1.在attrValueList.push()初始化，2.this.$set
      // this.$set(attrValueList, index, { valueName: attr.valueName });
      // 2.2row就是想到当前的响应数据，直接改

      row.valueName = valueName;
      // 2.3失去焦点之后把input隐藏，显示span 编辑模式->显示模式
      row.isEdit = false;
      // 2.4再给临时的值清空，以防下次还要收集
      this.attr.valueName = "";
      // console.log(this.attr.valueName, "set");
    },

    // 3.显示p 显示模式 ->编辑模式 (p保存的row里面的值，input保存的临时的值)
    showEdit(row, index) {
      // 3.1 显示p
      row.isEdit = true;
      // 3.2再一次点击出现编辑模式，当前的p显示当前的的值
      this.attr.valueName = this.attrValueList[index].valueName;
      // console.log(this.attr.valueName, "show");
      // 3.3让点击哪一个出现聚焦
      this.$nextTick(() => {
        this.$refs[`input${index}`].focus();
      });
    },
    // 4.删除属性值
    delAttrValue(index) {
      this.attrValueList.splice(index, 1);
    },
    // 5.点击确定,校验表单值不能为空
    saveAttrValueList() {
      const {
        attrValueList,
        attr: { attrName },
      } = this;
      // 表单校验成功 attr.attrName,attrValueList不能为空
      this.$refs.form.validate(async (vali) => {
        if (!vali) return;
        // 属性值为空
        if (!attrValueList.length) {
          this.$message({
            type: "error",
            message: "请添加至少一个属性值",
          });
          return;
        }
        const attr = {
          attrName,
          attrValueList,
          categoryId: this.category3Id,
          categoryLevel: 3,
        };
        // 5.1发送请求
        await reqSaveAttrInfo(attr);
        this.cancel();
      });
    },
    // 6.取消 清空表单，跳回，
    cancel() {
      // 5.2清空所有的数据
      this.attrValueList = [];
      this.attr.attrName = "";
      // 5.3页面显示AttrList
      this.$emit("setShow", true);
    },
  },
};
</script>

<style  lang='sass' scoped>
.margin
  margin: 10px 0
</style>